<template>
  <!-- 生产完成情况 -->
  <div class="allBox">
    <h1>生产完成情况</h1>
    <div class="allContent">
      <div class="progressBox">
        <ul v-if="proList.length > 0">
          <li v-for="(item,index) in proList" :key="index">
            <span class="fl">{{item.planNo}}</span>
            <p class="fl">
              <el-progress :text-inside="true" :stroke-width="16" text-color="#fff !important" :percentage="item.finishRate"></el-progress>
            </p>
          </li>
        </ul>
        <div v-else class="kong">暂无数据</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    proList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {}
  },
  watch: {},
  mounted() {},
  methods: {}
}
</script>
<style lang='scss' scoped>
/* 进度条样式 */
.progressBox {
  padding: 33px 30px;
  height: 100%;
  ul {
    height: 100%;
    li {
      list-style: none;
      overflow: hidden;
      padding: 3px 5px;
      height: 16.6666%;
      span {
        font-size: 12px;
        color: #fff;
        width: 70px;
        text-align: right;
        margin-right: 10px;
        height: 18px;
        line-height: 18px;
      }

      p {
        margin: 0;
        width: calc(100% - 80px);
        height: 100%;
      }
    }
  }
  .kong {
    background-size: 50% auto;
  }
}
</style>
